<template>
    <div id="main" style="width: 800px;height:600px;"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { getStudentList } from '@/apis/student'
import { decryptAES } from '@/utils/jiemi'  // 解密方法




onMounted(async ()=>{
    let myChart = echarts.init(document.getElementById('main'));
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '课程人数',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    // 同步请求后端课程的信息
                    { value: JSON.parse(decryptAES((await getStudentList({ couresName: 'python基础核心语法' })).data,'123456')).total, name: 'python基础核心语法' },
                    { value: JSON.parse(decryptAES((await getStudentList({ couresName: 'python全栈开发' })).data,'123456')).total, name: 'python全栈开发' },
                    { value: JSON.parse(decryptAES((await getStudentList({ couresName: 'web前端全栈进阶班' })).data,'123456')).total, name: 'web前端全栈进阶班' },
                    { value: JSON.parse(decryptAES((await getStudentList({ couresName: 'web前端基础班' })).data,'123456')).total, name: 'web前端基础班' },
                    { value: JSON.parse(decryptAES((await getStudentList({ couresName: '网络安全基础' })).data,'123456')).total, name: '网络安全基础' },
                ],
            } 
        ]
    };
// 将配置传入容器中
    myChart.setOption(option);

})





</script>

<style lang="scss"></style>